<template>
	<div class="wos-page">
		<div class="main">
			<div class="wos-search-line wos-flex wos-flex-between">
				<div class="wos-flex">
					<div class="wos-search-line-title">物理位置：</div>
					<div>
						<select name="drive">
							<option value="设备信息">主柜</option>
						</select>
					</div>
				</div>
				<div class="wos-flex">
					<div @click="addnet = true" class="wos-hand icon">
						<i class="iconfont icon-jia wos-green"></i> &nbsp; 添加
					</div>
					<div @click="hot = true" class="wos-hand icon">
						<i class="iconfont icon-rebeiguanli wos-color-blue"></i> &nbsp; 热备管理
					</div>
				</div>
			</div>
			<wos-table :record="raid" @show="show"></wos-table>
		</div>
		<div class="console">
			<button @click="refresh" class="active">确定</button>
			<button @click="refresh">刷新</button>
		</div>
<!--节点详细信息-->
		<div class="wos-model" v-show="infoShow">
			<div class="cc" style="width: 800px;">
				<div class="wos-model-title wos-flex wos-flex-between">
					<div>详细信息</div>
					<div><i class="iconfont icon-x1" @click="infoShow=false"></i></div>
				</div>
<!--				<div class="content wos-flex">-->
<!--					<div class="input-title">名称:</div>-->
<!--					<div style="width: 300px">-->
<!--					</div>-->
<!--				</div>-->
				<div class="table" style="margin: 20px 0">
					<wos-table :record="infoTempData" status="mini"></wos-table>
				</div>
			</div>
		</div>
<!--热备管理-->
		<div class="wos-model" v-show="hot">
			<div class="cc" style="width: 800px;">
				<div class="wos-model-title wos-flex wos-flex-between">
					<div>热备管理</div>
					<div><i class="iconfont icon-x1" @click="hot=false"></i></div>
				</div>
				<div class="table" style="margin-top: 20px">
					<wos-table :record="hotData" status="mini"></wos-table>
				</div>
				<div class="btns wos-flex wos-flex-between">
					<div></div>
					<div>
						<button class="wos-btn wos-btn-no" @click="hot = false">取消</button>
						<button class="wos-btn wos-btn-yes">确定</button>
					</div>
				</div>
			</div>
		</div>
<!--添加		-->
		<div class="wos-model" v-show="addnet">
			<div class="cc" style="width: 800px;">
				<div class="wos-model-title wos-flex wos-flex-between">
					<div>添加</div>
					<div><i class="iconfont icon-x1" @click="addnet=false"></i></div>
				</div>
				<div class="content wos-flex">
					<div class="input-title">创建类型:</div>
					<div style="width: 300px">
						<select name="" id="">
							<option value="手动">手动</option>
							<option value="一键">一键</option>
							<option value="raid">Raid2.0</option>
						</select>
					</div>
				</div>
				<div class="table">
					<wos-table :record="addData" status="mini"></wos-table>
				</div>
				<div class="content wos-flex">
					<div class="input-title">Reid类型:</div>
					<div>
						<select style="width: 220px">
							<option value="RAIDJ">RAIDJ</option>
							<option value="SRAID">SRAID</option>
							<option value="RAID0">RAID0</option>
							<option value="RAID1">RAID1</option>
							<option value="RAID2">RAID2</option>
							<option value="RAID3">RAID3</option>
							<option value="RAID4">RAID4</option>
							<option value="RAID5">RAID5</option>
							<option value="RAID6">RAID6</option>
							<option value="RAID50">RAID50</option>
							<option value="RAID60">RAID60</option>
						</select>
						<span style="padding-left: 20px">磁盘个数（3-16）</span>
					</div>
				</div>
				<div class="content wos-flex">
					<div class="input-title">同步方式:</div>
					<div style="width: 300px">
						<select style="width: 220px">
							<option value="自适应">自适应</option>
							<option value="同步优先">同步优先</option>
							<option value="业务优先">业务优先</option>
							<option value="均衡">均衡</option>
						</select>
					</div>
				</div>
				<p style="padding-left: 20px">注意：推荐性能最佳的Raid5组合为3个、5个或者9个硬盘.</p>
				<div class="btns wos-flex wos-flex-between">
					<div></div>
					<div>
						<button class="wos-btn wos-btn-no" @click="addnet = false">取消</button>
						<button class="wos-btn wos-btn-yes">确定</button>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
    import ipInput from '../../components/ip-input/ip-input'
    export default {
        name: "onlineusers",
        components:{
            ipInput
        },
        data:function(){
            return {
                check:false,
                raid:"",
                addData:[],
                addnet:false,
                hot:false,
	            hotData:[],
                infoShow:false,
	            info:[],
	            infoTempData:[]
            }
        },
        beforeMount() {
            this.getData()
        },
        methods:{
            show(obj){
                this.infoShow = true
	            this.info = obj

            },
            getData(){
                let that = this
                this.axios.get('/api/save/raid.json')
                    .then(function (response) {
                        if( response.data.code == 200) {
                            that.raid = response.data.data
	                        that.addData = response.data.addData
	                        that.hotData = response.data.hotData
	                        that.infoTempData = response.data.infoTempData
                        }
                    })
                    .catch(function (error) {
                        that.$message.warn('服务器连接超时，请稍后重试')
                    });
            },
            refresh(){
                this.getData()
                this.jumpTop()
            }
        }
    }
</script>

